<template>
	<view class="online-custom-list" style="padding: 2px 4px">
		<u-button v-if="operationVisible(0)" type="success" plain size="medium" :custom-style="customStyle"
			@click="onOperationClick(getOperation(0))">
			<u-icon name="plus" color="#00AE1C"></u-icon>{{ (getOperation(0) || {}).name || '添加' }}
		</u-button>
		<template v-if="cardWidget">
			<CustomList
				class="list-box"
				ref="list"
				:dataList="value"
				:supportPullRefresh="supportPullRefresh"
			>
				<online-image-card
					class="list-item"
					v-for="(data, i) in value"
					:key="i"
					:rowData="data"
					:widget="cardWidget"
					:parentWidget="widget"
					:isBlock="true"
				>
					<view slot="menu" v-if="operationVisible(2) || operationVisible(1)"
						style="display: flex;justify-content: flex-end; border-top: 1px solid #D9DBDD; padding-top: 10px;">
						<u-icon v-if="operationVisible(2)" name="trash" size="14px" :color="theme.error_color"
							@click="onOperationClick(getOperation(2), data)">
						</u-icon>
						<text v-if="operationVisible(2)"
							@click="onOperationClick(getOperation(2), data)"
							:style="{color: theme.error_color}"
							style="margin-left: 4px;"
						>{{(getOperation(2) || {}).name || '删除'}}</text>
						<u-icon v-if="operationVisible(1)" name="edit-pen" size="14px" :color="theme.primary_color"
							style="margin-left: 8px;" @click="onOperationClick(getOperation(1), data)">
						</u-icon>
						<text v-if="operationVisible(1)"
							@click="onOperationClick(getOperation(1), data)"
							:style="{color: theme.primary_color}"
							style="margin-left: 4px;"
						>{{(getOperation(1) || {}).name || '编辑'}}</text>
					</view>
				</online-image-card>
			</CustomList>
		</template>
	</view>
</template>

<script>
	import {
		findItemFromList
	} from '@/utils';
	import CustomList from '@/views/components/CustomList.vue';

	export default {
		name: 'onlineCustomList',
		props: {
			value: {
				type: Array,
				default: () => []
			},
			widget: {
				type: Object
			},
			supportPullRefresh: {
				type: Boolean,
				default: true
			}
		},
		components: {
			CustomList
		},
		inject: ['form'],
		provide() {
			return {
				parentWidget: this.widget
			}
		},
		data() {
			return {
				customStyle: {
					background: '#E5F7E7',
					marginBottom: '24rpx',
					marginTop: '24rpx',
					width: '100%'
				}
			}
		},
		methods: {
			hasOperator(type) {
				let temp = this.getOperation(type);
				return temp && temp.enabled;
			},
			getOperation(type) {
				return findItemFromList(this.widget.operationList, type, 'type');
			},
			operationVisible(type) {
				let operation = this.getOperation(type);
				if (operation == null) return false;
				return !this.form().readOnly && this.hasOperator(type) && this.form().checkOperationVisible(operation);
			},
			async onTableDataListChange(dataList) {
				if (this.widget.eventInfo && typeof this.widget.eventInfo[this.OnlineFormEventType.AFTER_LOAD_TABLE_DATA] === 'function') {
					dataList = await this.widget.eventInfo[this.OnlineFormEventType.AFTER_LOAD_TABLE_DATA](dataList);
				}
				this.$emit('input', dataList);
				return dataList;
			},
			onOperationClick(operation, row) {
				if (operation.type === this.SysCustomWidgetOperationType.BATCH_DELETE) {
					this.onDeleteRow(row);
				} else if (operation.type === this.SysCustomWidgetOperationType.DELETE) {
					this.onDeleteRow(row);
				} else {
					this.form().handlerOperation(
						operation,
						row,
						this.widget,
						(res) => {
							this.handlerEditOperate(row, res);
						}
					);
				}
			},
			handlerEditOperate(row, res) {
				if (this.widget.relation != null) {
					let tempList = [
						...this.value
					];
					if (row == null) {
						// 新增记录
						row = res;
						tempList.push({
							...row,
							__cascade_add_id__: new Date().getTime()
						});
					} else {
						// 更新记录
						row = res;
						tempList = tempList.map(item => {
							if (row.__cascade_add_id__ != null) {
								return row.__cascade_add_id__ === item.__cascade_add_id__ ? row : item;
							} else {
								return row[this.widget.primaryColumnName] === item[this.widget.primaryColumnName] ?
									row : item;
							}
						});
					}
					this.onTableDataListChange(tempList);
				}
			},
			onDeleteRow(row) {
				const self = this
				uni.showModal({
					title: '消息',
					content: '是否删除当前数据？',
					success(res) {
						if (res.confirm) {
							let tempList = [
								...self.value.filter(data => {
									if (data.__cascade_add_id__ != null) {
										return data.__cascade_add_id__ !== row.__cascade_add_id__;
									} else {
										return data[self.widget.primaryColumnName] !== row[self.widget
											.primaryColumnName];
									}
								})
							];
							self.onTableDataListChange(tempList);
						}
					}
				});
			}
		},
		computed: {
			cardWidget() {
				return (Array.isArray(this.widget.childWidgetList) && this.widget.childWidgetList.length > 0) ? this.widget
					.childWidgetList[0] : undefined;
			}
		},
		watch: {
			value: {
				handler() {
					if (this.$refs.list) this.$refs.list.reset();
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>

</style>